<template>
  <div id="headNav">
    <div class="demo-type">
      <el-row type="flex" class="leftHead" justify="start">
        <div>
          <img src="../../assets/img/logo.png" />
        </div>
      </el-row>
      <el-row type="flex" class="rightHead" justify="end">
        <i class="el-icon-warning"></i>

        <el-link class="rightHead-font font-right" :underline="false">帮助</el-link>

        <el-avatar icon="el-icon-user-solid"></el-avatar>

        <el-link class="rightHead-font" :underline="false">{{username}}</el-link>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "HeaderView",

  data() {
    return {
      username: window.sessionStorage.getItem("healthUserName"),
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>

#headNav{
  background-color: #40a0fffd;
  background-image: linear-gradient(to right, #40a0fffd, rgb(218, 218, 203));
  // height: 10vh;
  min-height: 90px;
}

#headNav * {
  box-sizing:border-box;
}

#headNav .leftHead div{
  margin: 30px 40px 0;
}
#headNav .rightHead {
  margin-top: -35px;
}
#headNav .rightHead-font {
  margin: 0px 20px 0;
  color: aliceblue;
}
#headNav .font-right {
  margin: 0 20px 0 5px;
  color: aliceblue;
}
#headNav .el-icon-warning {
  margin-top: 12px;
  color: aliceblue;
}
</style>